import React, {Component} from 'react'
import {Button, Form, Input, Popconfirm, Table, Tooltip} from 'antd';
import {connect} from "react-redux";

class MsgList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            pageNum: 1,
            pageSize: 10,
            startTime: '',
            endTime: '',
            visible: false,
            value: {},
            current: 1

        };
        this.columns = [
            {
                title: 'ID',
                dataIndex: 'id',
                align: 'center',

            },
            {
                title: '消息类型',
                dataIndex: 'type',
                align: 'center',
                render: (_, record) => {
                    return (
                        <div>
                            个人消息
                        </div>
                    )
                }

            },
            {
                title: '消息内容',
                dataIndex: 'content',
                align: 'center',
                width: 160,
                render: content => (
                    <Tooltip title={content}>
                        <div style={{
                            width: 160,
                            overflow: "hidden",
                            textOverflow: "ellipsis",
                            whiteSpace: "nowrap",
                            textAlign: 'center'
                        }}>
                            {content}
                        </div>
                    </Tooltip>
                ),

            },
            {
                title: '发送人',
                align: 'center',
                dataIndex: 'createBy',


            },
            {
                title: '添加时间',
                align: 'center',
                dataIndex: 'createTime',


            },
            {
                title: '操作',
                align: 'center',
                // dataIndex: 'addTime',
                render: (_, record) => {
                    return (
                        <div>
                            {/* <a onClick={() => this.updateInfo(record)}>编辑</a> */}
                            <Popconfirm
                                title="确定删除吗？"
                                onConfirm={() => this.del(record)}
                                okText="删除"
                                cancelText="取消"
                            >
                                <a style={{marginLeft: 30}}>删除</a>
                            </Popconfirm>
                        </div>
                    )
                }
            },


        ];

    }

    onFinish = (values) => {
        if (values) {
            values.mId = this.props.record.id;
            this.props.pushMsg(values)
                .then(res=>{
                    this.props.msgList(this.state.value)
                })


        }
    };

    onFinishFailed = (errorInfo) => {

    };

    componentDidMount() {
        this.init()
    }

    init = () => {
        const params = {pageNo: 1, pageSize: 10, type: 5, mId: this.props.record.id}
        this.setState({value: params})
        this.props.msgList(params)
    };

    query = (current, pageSize) => {
        const {value} = this.state;
        value.pageNo = current;
        this.setState({current});
        this.props.msgList({...value})
    };

    handleCancel = () => {
        this.setState({
            visible: false,
        })

    };
    del = (record) => {
        const {current, value} = this.state
        value.pageNo = current;
        this.props.delMsg({id: record.id}).then(res => {
            this.props.msgList(value)
        })
    };

    render() {
        const {msgData} = this.props;
        const pagination = {
            current: msgData.current,//当前页
            total: msgData.total,//总条数
            pageSize: msgData.size,//页大小
            onChange: this.query,
            showQuickJumper: true,//快速跳转
            showSizeChanger: false//大于50时显示pageSize切换器
        };
        return (
            <div>
                <Form
                    preserve={false}
                    name="basic"
                    initialValues={{remember: true}}
                    onFinish={this.onFinish}
                    onFinishFailed={this.onFinishFailed}
                    autoComplete="off"
                    layout='inline'
                >
                    <Form.Item
                        style={{width: 1200}}
                        label="消息："
                        name="body"
                        rules={[{required: true, message: '请输入内容!'}]}
                    >
                        <Input.TextArea placeholder='要发送的内容'/>
                    </Form.Item>

                    <Form.Item wrapperCol={{offset: 2, span: 16}}>
                        <Button htmlType="reset">
                            清空
                        </Button>
                    </Form.Item>
                    <Form.Item wrapperCol={{offset: 8, span: 16}}>
                        <Button type="primary" htmlType="submit">
                            发送
                        </Button>
                    </Form.Item>
                </Form>
                <Table columns={this.columns}
                       dataSource={msgData.records}
                       rowKey={record => record.id}
                       pagination={pagination}

                />

            </div>
        );
    }
}

const mapState = state => ({
    ...state.users

});

const mapDispatch = dispatch => ({
    ...dispatch.users
})

export default connect(mapState, mapDispatch)(MsgList);